import { Card, Breadcrumb, Form, Button, Radio, Input, Upload, Space, message } from "antd"
import { PlusOutlined } from "@ant-design/icons"
import { Link, useHistory, useParams } from "react-router-dom"
import ReactQuill from "react-quill"
import "react-quill/dist/quill.snow.css"
import styles from "./index.module.scss"
import Channel from "@/components/Channel"
import { useState, useRef, useEffect } from "react"
import { useDispatch } from "react-redux"
import { updateArticle, getArticleById } from "@/store/actions"
const Publish = () => {
  // 通过 `useRef` hook 创建 ref 对象，在上传图片时，存储所有已上传图片
  const fileListRef = useRef([])
  // 文件列表
  const [fileList, setFileList] = useState([])
  const onUploadChange = (info) => {
    // info.fileList 用来获取当前的文件列表
    const fileList = info.fileList.map((file) => {
      // 刚从本地上传的图片
      if (file.response) {
        return {
          url: file.response.data.url
        }
      }
      // 已有图片
      return file
    })
    setFileList(fileList)
    // 上传图片时，将所有图片存储到 ref 中
    fileListRef.current = fileList
  }
  // 文件最大数量
  const [maxCount, setMaxCount] = useState(1)
  const changeType = (e) => {
    const count = e.target.value
    setMaxCount(count)
    if (count === 1) {
      // 单图，只展示第一张
      const firstImg = fileListRef.current[0]
      setFileList(firstImg === undefined ? [] : [firstImg])
    } else if (count === 3) {
      // 三图，展示所有图片
      setFileList(fileListRef.current)
    }
  }
  const dispatch = useDispatch()
  const history = useHistory()
  const onFinish = async (values) => {
    saveArticles(values, "add")
  }
  // 注意：此处的 form 是从数组中解构出来的
  const [form] = Form.useForm()
  const saveDraft = async () => {
    try {
      const values = await form.validateFields()
      saveArticles(values, "draft")
    } catch {}
  }
  const saveArticles = async (values, saveType) => {
    // 说明：如果选择 3 图，图片数量必须是 3 张，否则，后端会当做单图处理
    //      后端根据上传图片数量，来识别是单图或三图
    if (values.type !== fileList.length) return message.warning("封面数量与所选类型不匹配")
    const { type, ...rest } = values
    const data = {
      ...rest,
      // 注意：接口会按照上传图片数量来决定单图 或 三图
      cover: {
        type,
        images: fileList.map((item) => item.url)
      }
    }
    // 如果是编辑，就将 id 存储到 data 中，传递给接口
    if (isEdit) {
      data.id = params.id
    }
    try {
      // true 草稿
      // false 正常发布
      // 注意：此处为 action 加入第三个参数，表示是否是编辑
      await dispatch(updateArticle(data, saveType === "add", isEdit))
      const text = isEdit ? "修改" : "发布"
      const showMsg = saveType === "add" ? `${text}成功` : "存入草稿成功"
      message.success(showMsg, 1, () => {
        history.push("/home/article")
      })
    } catch {}
  }
  // 根据文章 id 是否存在判断是否为编辑状态
  const params = useParams()
  const isEdit = params.id !== undefined
  // 1. 判断文章 id 是否存在，如果存在就根据 id 获取文章详情数据2. 将文章数据存储到 redux 中3. 格式化文章数据，展示在表单中
  useEffect(() => {
    const loadData = async () => {
      if (!isEdit) return
      // 编辑
      try {
        // 获取文章信息
        const res = await dispatch(getArticleById(params.id))
        const { images, ...formValue } = res
        // 动态设置表单数据
        form.setFieldsValue(formValue)
        // 格式化封面图片数据
        const imageList = images.map((item) => ({ url: item }))
        setFileList(imageList)
        setMaxCount(formValue.type)
        fileListRef.current = imageList
      } catch {}
    }
    loadData()
  }, [form, params.id, dispatch, isEdit])
  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{isEdit ? "修改文章" : "发布文章"}</Breadcrumb.Item>
          </Breadcrumb>
        }>
        <Form onFinish={onFinish} form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} initialValues={{ type: 1, content: "" }}>
          <Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入文章标题" }]}>
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item label="频道" name="channel_id" rules={[{ required: true, message: "请选择文章频道" }]}>
            <Channel width={400} />
          </Form.Item>

          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={changeType}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {maxCount > 0 && (
              <Upload
                name="image"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList
                action="http://geek.itheima.net/v1_0/upload"
                fileList={fileList}
                onChange={onUploadChange}
                maxCount={maxCount}
                multiple={maxCount > 1}>
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
            )}
          </Form.Item>
          <Form.Item label="内容" name="content" rules={[{ required: true, message: "请输入文章内容" }]}>
            <ReactQuill className="publish-quill" theme="snow" placeholder="请输入文章内容" />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                {isEdit ? "修改文章" : "发布文章"}
              </Button>
              <Button size="large" onClick={saveDraft}>
                存入草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish
